<template>
	<view class="editPassword">
		
		<u-navbar  title="修改密码"  :border-bottom="false"  >
		</u-navbar>
		<view class="editPassword__block">
		
			
<!-- 			<u-field class="editPassword__block__input" v-model="phone" placeholder="电话号码" :label-width="0">
				<view class="editPassword__block__input__countryCode"  slot="icon"  @click="getCountry()">
					<view>+{{$store.state.code}}</view>
					<view class="editPassword__block__input__countryCode__border-right"></view>
				</view>
			</u-field> -->
			<u-field class="editPassword__block__input" v-model="oldPassword" label="旧密码" :password="true" :clearable="false">
			
			</u-field>
			<u-field class="editPassword__block__input" v-model="newPassword" label="新密码" :password="true" :clearable="false">

			</u-field>
			<u-field class="editPassword__block__input" v-model="confirmPassword"label="确认密码" :password="true" :clearable="false">
			
			</u-field>
<!-- 			<u-field class="editPassword__block__input" v-model="code" placeholder="验证码" :label-width="0" >
				<view v-bind:class="{editPassword__block__input__button:this.canClick,editPassword__block__input__button__disabled:!this.canClick}" slot="right" @click="getCode()">{{content}}</view>
			</u-field> -->
			<u-button class="editPassword__block__button" type="primary" @click="varify()">确认修改</u-button>
		</view>
	
	</view>
</template>

<script>
	import  axios from "axios";
	import store from './store.js'
	export default {
		data() {
			return {
				oldPassword:"",
				phone:"",
				newPassword: '',
				confirmPassword:"",
			}
		},
		onLoad() {
			
		},
		onLoad() {

		},
		mounted(){
			this.phone=this.$store.state.userInfo.phone
			console.log("phone",this.phone)
		},
		methods: {
			goback(){
				uni.navigateBack();
			},
			varify(){
				if(this.oldPassword==""){
					uni.showToast({
						title:"旧密码不能为空",
						icon:"none",
						duration:2000
					})
					return 
				}
				else if(this.newPassword==""){
					uni.showToast({
						title:"新密码不能为空",
						icon:"none",
						duration:2000
					})
					return 
				}
				else if(this.confirmPassword!=this.newPassword){
					uni.showToast({
						title:"两次输入密码不一致",
						icon:"none",
						duration:2000
					})
					return 
				}
				this.editPassword()
			},
			editPassword(){
				let editPasswordData={
					phone:this.phone,
					oldPassword:this.oldPassword,
					newPassword:this.newPassword,
					newConfirmPassword:this.confirmPassword,
				}
				this.$Axios({
					method:"post",
					url:getApp().$store.state.baseURL+"/user/password/fix",
					data:editPasswordData,
				}).then((response)=>{
					console.log("response",response)
					if(response.data.state=="Success"){
						uni.showToast({
							title:"修改密码成功，请重新登录",
							icon:"none",
							duration:1000,
						})
						uni.removeStorageSync('token');
						this.$store.state.userInfo=null
						setTimeout(function(){
							uni.navigateTo({
								url:"/pages/login/login"
							})	
						},1000);

					}else{
						uni.showToast({
							title:response.data.msg,
							icon:"none",
							duration:2000
						})
					}
				})
			}
		
		}
	}
</script>
<style lang="scss" scoped>
	a {
		color: $uni-text-color-placeholder;
	}
</style>
<style lang="less" scoped>
	.editPassword{
		display: flex;
		flex-direction: column;
		align-items: center;
		&__block {
		
		display: flex;
		flex-direction: column;

		&__title{
			align-self: flex-start;
			font-size: x-large;
			// font-weight: bold;
			margin: @uni-spacing-row-sm @uni-spacing-col-lg 0 @uni-spacing-col-lg ;
		}
		
		.form {
			}
			&__input {
				margin:@uni-spacing-row-sm @uni-spacing-col-lg  0  @uni-spacing-col-lg ;
				&__countryCode{
					margin-right: @uni-spacing-col-sm ;
					display: flex;
					align-items: center;
					&__border-right{
						margin-left: @uni-spacing-col-base;
						background-color: @uni-border-color;
						width: 1px;
						height: 10px;
					}
				}
				&__button{
					// background-color: #e2e2e2;
					font-size: small;
					color: @font-color-blue;
					&__disabled{
						color: @uni-text-color-grey;
						cursor: not-allowed;
					}
				}

			}
			&__button {
				margin-top: @uni-spacing-row-lg;
				margin-left: @uni-spacing-col-lg;
				margin-right: @uni-spacing-col-lg;
			}
		// }
	}
	}
</style>
